<template>
	<view class="page">
		<view class="top">
			300.00
		</view>
		<u-text text="支付方式" color="#767676" margin="40rpx 0 0 60rpx"></u-text>
		<view class="type">
			<u-radio-group v-model="radiovalue1" placement="row" @change="groupChange">
				<view class="ele">
					<u-icon name="/static/icons/counter1.png" size=30></u-icon>
					<u-text text="充值卡支付" margin="0 0 0 10rpx"></u-text>
					<!-- <u-text text="卡号：88888"></u-text> -->
					<u-radio name="counter1"></u-radio>
				</view>
				<view class="ele">
					<u-icon name="/static/icons/counter2.png" size=30></u-icon>
					<u-text text="微信支付" margin="0 0 0 10rpx"></u-text>
					<u-radio name="counter2"></u-radio>
				</view>

			</u-radio-group>

		</view>
		<view class="bottom" @click="pay">
			<u-button color="#3662EC" text="确认付款" shape="circle"></u-button>
		</view>


	</view>
</template>
<script>

export default {
	data() {
		return {
		}
	},
	methods: {
		pay() {
			this.goToUrl('/pages/pay/refund')
		}
	}
}	
</script>
<style lang="scss" scoped>
.top {
	font-size: 60rpx;
	color: white;
	height: 300rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(180deg, #3A61ED 0%, #5656F1 100%);
}

.type {
	display: flex;
	padding: 20rpx 30rpx;

	::v-deep .u-radio-group {
		justify-content: space-between;
		flex-direction: row !important;
	}

	.ele {
		width: 300rpx;
		border-radius: 10px;
		background-color: white;
		display: flex;
		padding: 30rpx 20rpx;
	}
}


.bottom {
	width: 300rpx;
	margin: 100rpx auto 0 auto;
}
</style>
